<!-- 部门树 -->
<template>
  <el-card shadow="never">
    <el-input v-model="deptName" placeholder="部门名称" clearable>
      <template #prefix>
        <el-icon>
          <Search />
        </el-icon>
      </template>
    </el-input>

    <el-tree
      ref="deptTreeRef"
      class="mt-2"
      :data="deptList"
      :props="{ children: 'children', label: 'label', disabled: '' }"
      :expand-on-click-node="false"
      :filter-node-method="handleFilter"
      default-expand-all
      @node-click="handleNodeClick"
    />
  </el-card>
</template>

<script setup lang="ts">
  import DeptAPI from "@/api/system/dept";

  const props = defineProps({
    modelValue: {
      type: [Number],
      default: undefined,
    },
  });

  const deptList = ref<OptionType[]>(); // 部门列表
  const deptTreeRef = ref(); // 部门树
  const deptName = ref(); // 部门名称

  const emits = defineEmits(["node-click"]);

  const deptId = useVModel(props, "modelValue", emits);

  watchEffect(
    () => {
      deptTreeRef.value.filter(deptName.value);
    },
    {
      flush: "post", // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
    }
  );

  /**
   * 部门筛选
   */
  function handleFilter(value: string, data: any) {
    if (!value) {
      return true;
    }
    return data.label.indexOf(value) !== -1;
  }

  /** 部门树节点 Click */
  function handleNodeClick(data: { [key: string]: any }) {
    deptId.value = data.value;
    emits("node-click");
  }

  onBeforeMount(() => {
    DeptAPI.getOptions().then(({ data }) => {
      deptList.value = data;
    });
  });
</script>
